﻿<%@page pageEncoding="utf-8" %>
<%@include file="/util/tag.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <%@include file="../common/head.jsp"%>
    <script language="javascript" type="text/javascript">
            //写入下拉框中的年份和月份
            function initialYearAndMonth() {
                //写入最近3年
                var yearObj = document.getElementById("selYears");
                var year = (new Date()).getFullYear();
                for (var i = 0; i <= 2; i++) {
                    var opObj = new Option(year - i, year - i);
                    if(year-i=="${yyyy}") opObj.selected=true;
                    yearObj.options[i] = opObj;
                }
                //写入 12 月
                var monthObj = document.getElementById("selMonths");
                var opObj = new Option("全部", "-1");
                monthObj.options[0] = opObj;
                for (var i = 1; i <= 12; i++) {
                			var val = i;
                			if(i<10) val="0"+i;
                    var opObj = new Option(i, val);
                    if(val=="${mm}") opObj.selected=true;
                    monthObj.options[i] = opObj;
                }
            }
    </script>
    
    <body onload="initialYearAndMonth();">
       <%@include file="../common/top.jsp"%>
        
        <div id="main">
            <form action="list" method="post">
                <!--查询-->
                <div class="search_add">                        
                    <div>身份证：<input type="text" name="idcardNo"  value="${idcardNo}" class="text_search" /></div>
                    <div>账务账号：<input type="text" name="loginName" value="${loginName}" class="width100 text_search" /></div>                            
                    <div>姓名：<input type="text" name="realName" value="${realName}" class="width70 text_search" /></div>
                    <div>
                        <select class="select_search" id="selYears" name="yyyy">
                        </select>
                        年
                        <select class="select_search" id="selMonths" name="mm">
                        </select>
                        月
                    </div>
                    <div><input type="submit" value="搜索" class="btn_search" /></div>
                </div>  
                <!--数据区域：用表格展示数据-->     
                <div id="data">            
                    <table id="datalist">
                    <tr>
                        <th class="width50">账单ID</th>
                        <th class="width70">姓名</th>
                        <th class="width150">身份证</th>
                        <th class="width150">账务账号</th>
                        <th>费用</th>
                        <th class="width100">月份</th>
                        <th class="width100">支付方式</th>
                        <th class="width100">支付状态</th>                                                        
                        <th class="width50"></th>
                    </tr>
                    <s:iterator value="bills">
                    <tr>
                        <td>${id}</td>
                        <td>${account.realName}</td>
                        <td>${account.idcardNo}</td>
                        <td>${account.loginName}</td>
                        <td>${cost}</td>
                        <td><s:property value="toBillMonth()"/></td>
                        <td>${paymentMode}</td>
                        <td><s:if test="payState==0">未支付</s:if><s:else>已支付</s:else></td>                            
                        <td><a href="item?billId=${id}" title="账单明细">明细</a></td>
                    </tr>
                    </s:iterator>
                </table>
                
                <p>业务说明：<br />
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br />
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br />
                3、年和月的数据由 js 代码自动生成；<br />
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
                </div>                    
                <!--分页-->
                <div id="pages">
                    <a href="?idcardNo=${idcardNo }&loginName=${loginName}&realName=${realName }&yyyy=${yyyy }&mm=${mm }&page=1">首页</a>
                  <s:if test="page>1">
        	        <a href="?idcardNo=${idcardNo }&loginName=${loginName}&realName=${realName }&yyyy=${yyyy }&mm=${mm }&page=${page-1}">上一页</a>
        	        </s:if><s:else><a>上一页</a></s:else>
        	        <s:iterator begin="1" end="pageCount" var="i">
                    <a href="?idcardNo=${idcardNo }&loginName=${loginName}&realName=${realName }&yyyy=${yyyy }&mm=${mm }&page=${i}" <s:if test="page==#i">class="current_page"</s:if> >${i}</a>
                 </s:iterator>
                 <s:if test="page<pageCount">
        	        <a href="?idcardNo=${idcardNo }&loginName=${loginName}&realName=${realName }&yyyy=${yyyy }&mm=${mm }&page=${page+1}">下一页</a>
        	        </s:if><s:else><a>下一页</a></s:else>
                    <a href="?idcardNo=${idcardNo }&loginName=${loginName}&realName=${realName }&yyyy=${yyyy }&mm=${mm }&page=${pageCount}">末页</a>
                </div>                    
            </form>
        </div>
        
        <%@include file="../common/bottom.jsp"%>  
    </body>
</html>
